<template>
  <div class="meteragereport-manage" v-if="showList">
    <div class="model-title-css">

       <span slot="title">
        <span>{{ title }}</span>
      </span>

      <el-button
        style="margin-left: 15px"
        class="greenButton"
        type="primary"
        size="small"
        @click="sonShowFalse"
      ><i class="iconfont icon-icon_recall"></i> 返回
      </el-button>
    </div>

    <div class="background_wrap"  style="align-items: unset">
        <div class="operate_wrap flexDiv">
          <div class="flex-center">
            <el-button
              type="primary"
              size="small"
              class="add buildButtonStyle"
              @click="showDialog('build','新增履约人员信息','')"
              v-permission="permission.per"
            ><i class="iconfont icon-icon_add"></i> 新增
            </el-button>
            <el-upload
              class="upload-demo fill span18"
              action=""
              :before-upload="submitImportExcel"
            >
              <el-button id="excel-import-button" class="delete" style="width: 110px;margin: 0 10px" size="small" v-permission="permission.per"><i class="iconfont icon-icon_zp"></i> 导入excel
              </el-button>
            </el-upload>
            <el-button
              type="primary"
              size="small"
              class="daochu buildButtonStyle"
              round @click="exportExcel"
              v-permission="permission.per"
            >
              <i class="iconfont icon-daochu"></i>&nbsp;导出
            </el-button>
            <el-button class="delete" size="small" style="width: 110px;" @click="downfile" v-permission="permission.per" >
              <i class="iconfont icon-daochu"></i> 模板下载
            </el-button>
          </div>
        </div>
        <div class="list_wrap WholeScroll">
          <el-table
            :border="true"
            :row-class-name="tableRowStyleName"
            :cell-class-name="tableCellStyleName"
            :header-cell-class-name="tableHeaderCellStyleName"
            :stripe="true"
            :data="list[0]"
            style="width: 99%;margin-top:10px;"
            size="medium"
          >
            <el-table-column
              show-overflow-tooltip
              label="序号"
              width="60">
              <template slot-scope="scope">
                <span>{{search.pageNo * search.pageSize + scope.row.listIndex + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip

              prop="name"
              label="姓名">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.name}}</div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="性别">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.sexName}}</div>
              </template>
            </el-table-column>


            <el-table-column
              show-overflow-tooltip

              label="身份证号码">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.idCardNo}}</div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip

              label="联系方式">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.contactInformation}}</div>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip

              label="年龄">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.age}}</div>
              </template>
            </el-table-column>


            <el-table-column
              show-overflow-tooltip

              label="在职情况">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.jobStatusName}}</div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip

              label="岗位">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.post}}</div>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip

              prop="awardTime"
              width="120"
              label="资格证书类型">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.certificateType}}</div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip

              prop="createName"
              width="90"
              label="证书编号">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.certificateNumber}}</div>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip

              label="工作内容">
              <template slot-scope="scope">
                <div style="text-align: start">{{scope.row.content}}</div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              width="230px"
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button size="mini"  class="menu_icon iconfont icon-icon_look action_color1"  @click="showDialog('check','履约人员信息查看',scope.row.id)">&nbsp;查看</el-button>
                <el-button size="mini" v-permission="permission.per" class="menu_icon iconfont icon-xiugai-copy action_color1" @click="showDialog('edit','履约人员信息编辑',scope.row.id)">&nbsp;修改</el-button>
                <el-button size="mini" v-permission="permission.per" class="menu_icon iconfont icon-shanchu action_color2" @click="showDialog('delete','履约人员信息删除',scope.row.id)">&nbsp;删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="float: right; margin-top: 10px;"
            layout="prev, pager, next"
            :page-size="search.pageSize"
            :total="search.total"
            :current-page="search.pageNo + 1"
            :prev-text="tablePaginationPrev"
            :next-text="tablePaginationNext"
            @current-change="paginationChange"
          >
          </el-pagination>
        </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'
import contract  from '@/api/buss/contract'
import msgUtil from '@/utils/msgUtil'
import {performancePersondel} from "../../../../api/buss/contract";
//  复制粘贴指定模块名只改下面这个名字就好了
let modulename = 'sonList'
const urlBussBase = 'publish'
export default {
  name: modulename,
  components: {
    Detail: require(`./${modulename}-detail`).default
  },
  data() {
    const urlBussBase = "qualityengineering";
    return {
      contractName:'',
      projectName:'',
      projectId:'',
      companyName:'',
      showList:false,
      chooseLeftIndex: null,
      permission:{
        per: ['100', 'contract:personDeal'],
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',

      title: '',
      showSelectDialog: false,
      showReportDialog: false,
      // 搜索参数
      search: {
        pageIndex: 0,
        pageSize: 10,
        pageSum: 0,
        pageNo: 0,
        total:0,
      },

      defaultProps: {
        children: 'children',
        label: 'name'
      },
      postDetailData: {
        show: false,
        type: 'build'
      },
      list: [],
      data: {},
      activeName: 'first',
      navigationIndex:0
    }
  },
  props: {
    postSon: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },
  watch:{
    postSon(value) {

      this.detailId = value.detailId === undefined ? '0' : value.detailId

      let showList = value.showList === undefined ? '0' : value.showList
      let title = value.title === undefined ? '0' : value.title
      let projectId = value.projectId === undefined ? '0' : value.projectId
      let companyName = value.companyName === undefined ? '0' : value.companyName
      let projectName = value.projectName === undefined ? '0' : value.projectName
      let contractName = value.contractName === undefined ? '0' : value.contractName

      this.$set(this,'showList',showList)
      this.$set(this,'title',title)
      this.$set(this,'projectId',projectId)
      this.$set(this,'companyName',companyName)
      this.$set(this,'projectName',projectName)
      this.$set(this,'contractName',contractName)

      this.getList()
       console.log(value)
    }
    },
  mounted() {

  },
  methods: {
    //导出
    exportExcel() {
      //条件自己写咩

      let params ={
        companyName: this.companyName,
        projectId: this.projectId,
        contractId: this.detailId
      }
      contract.exportExcel(params).then(res => {
        doCreateObject(res, this.companyName+'-履约人员导出.xls')
      })
    },
    //模板下载
    downfile() {
      this.$httpPost(`/buss/performanceperson/downPerformancePersonFile`,
        this.search,{responseType: 'blob'}).then(res => {
        doCreateObject(res, '履约人员导入模板.xls');
      }).catch(e => {
        console.log(e);
        this.$messageError("请求excel模板失败")
      })
    },

    //  提交excel导入文件选择
    submitImportExcel(file) {
      let fd = new FormData()
      fd.append('file', file)
      fd.append('companyName', this.companyName)
      fd.append('projectId', this.projectId)
      fd.append('contractId', this.detailId)
      fd.append('Content-Type','multipart/form-data; boundary=----WebKitFormBoundaryIOi8qEBAFV1KN25n')
      contract.importExcel(fd).then(res => {
        if (res.code == 200) {
          //console.log(`成功导入${res.data.data}条数据`)
          this.$messageSuccess("成功导入数据")
          this.getList(true)
        } else {
          this.$messageError("请求导入excel失败:" + res.msg)
          //console.log("请求导入excel失败:" + res.data.message)
        }
      }).catch(e => {
        console.log(e,'水水水水水水水水水水水水水');
      })
    },
    sonShowFalse(){
      this.showList = false
      this.$emit('closeList')
    },
    keydown(){
      if (event.keyCode == 13) {
        this.getList(true)
      }
    },
    clickAdd(val){
      this.showDetailDialog(val)
    },

    /*  操作 */
    showDialog(type, typeName, detailId) {
      let params={}
      switch (type){

        case 'build':
           params = {
            contractId:this.detailId,
            projectId:this.projectId,
            companyName:this.companyName,
            projectName:this.projectName,
            contractName:this.contractName,
          }

          this.postDetailData = {
            show: true,
            //type: 'build',
            params: params,
            type: type,
            typeName: typeName,
          }
          break

       /* case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break*/
        case 'edit':
           params = {
            contractId:this.detailId,
            projectId:this.projectId,
            companyName:this.companyName,
            projectName:this.projectName,
            contractName:this.contractName,
          }
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
            params: params,
          }
          break
        case 'check':
           params = {
            contractId:this.detailId,
            projectId:this.projectId,
            companyName:this.companyName,
            projectName:this.projectName,
            contractName:this.contractName,
          }

          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
            params: params,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据?').then(res => {
            let idlist=[]
            idlist.push(detailId)
            let param={
              ids:idlist
            }
            contract.performancePersondel(param).then(res=>{
              if (res.code === 200) {
                msgUtil.success2('删除成功!')
                this.getList()
              }else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break

      }
    },

    // 切换列表
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },


    // 获取列表 api
    getList() {
      this.search.contractId = this.detailId
      this.search.projectId = this.projectId
      this.search.companyName = this.companyName
      this.$httpPost(`buss/performanceperson/performancePersonPaging`, this.search).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.list = []
          res.data.content.forEach((item, index) => {
            item.listIndex = index
          })
          this.$set(this.list, this.list.length, res.data.content)
          this.search.total = res.data.totalElements
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res);
        this.$messageError('请求失败')
      })
    },
    goback() {
      let row  = {
        projectName : this.search.projectName,
        projectId: this.search.projectId
      };

      this.$goRouteName('demolition-cost-detail', {row: row})
      //this.$router.back(-1)
    },

  },
}
</script>

<style scoped lang="scss">
  .navigation2{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #313e50;
    margin-top: 5px;
    border-bottom: 1px solid #e2e8ec!important;
    .el-button{
      height: 40px;
      border: 1px solid #374256;
      font-family: PingFangSC-Regular;
      border-radius: 5px 5px 0 0;
      min-width: 95px;
      font-size: 14px;
      color: #8190a7;
      background: #09abf6!important; border: 1px solid #09abf6!important; color: #fff!important;
      border-bottom: none!important;
      &:hover{
        background-color: #F2F2F2!important; color: #2AA7DC!important;
      }
    }
    /*选中样式*/
    .el-button[selected]{
      border: 1px solid #2AA7DC!important; border-bottom: 1px solid #F2F2F2!important; color: #2AA7DC!important;
      background-color: #F2F2F2!important;
    }
  }
  .operate_wrap2 {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    box-sizing: border-box;

    .el-button, .el-select, .el-input {
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      display: inline-block;
    }

    .el-date-editor--daterange {
      width: 300px;
    }

    .add {
      width: 88px;
    }

    .delete {
      width: 88px;
    }

    .search {
      width: 88px;
      float: right;
      color: #fff;
      margin-left: 10px;
    }

    .el-select {
      width: 140px;
      margin-left: 10px;
    }

    .input {
      width: 140px;
      float: right;
      margin-left: 10px;
      color: #3E556E;
    }
  }

  .operate_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    box-sizing: border-box;

    .el-button, .el-select, .el-input {
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      display: inline-block;
    }

    .el-date-editor--daterange {
      width: 300px;
    }

    .add {
      width: 88px;
    }

    .delete {
      width: 88px;
    }

    .search {
      width: 88px;
      float: right;
      color: #fff;
      margin-left: 10px;
    }

    .el-select {
      width: 140px;
      float: right;
      margin-left: 10px;
    }

    .input {
      width: 140px;
      float: right;
      margin-left: 10px;
      color: #3E556E;
    }
  }
  .list_wrap {
    margin-top: 20px;
  }
  .rowFileImg{
    cursor: pointer;
    width: 18px;
  }
  .flex-row{
    display: flex;
    flex-direction: row;
  }
  .left-box{
    min-width: 200px;
    border-right: 1px #e2e8ec  solid ;
    p{
      cursor: pointer;
      font-size: 14px;
    }
  }
  .right-box{
    width: calc(100% - 200px);
    padding-left: 15px;
  }
  .chooseText{
    color: #3270ef ;
  }
  .buttonDiv {
    position: absolute;
    cursor: pointer;
    width: 11px;
    font-size: 14px;
    top: 44%;
    height: 60px;
    line-height: 60px;
    color: #ffffff;
    z-index: 1;
    transition: left 1s;
    -moz-transition: left 1s; /* Firefox 4 */
    -webkit-transition: left 1s; /* Safari and Chrome */
    -o-transition: left 1s; /* Opera */
  }

  .buttonLeft {
    left: -15px;
    background: rgb(55, 66, 86);
    border-radius: 0 8px 8px 0;
  }

  .buttonRight {
    left: calc(12% - 11px);
    background: #33475d;
    border-radius: 8px 0 0 8px;
  }

  .demoClass {
    text-align: left !important;
  }

  /*.show-ellipsis {*/
  /*display: block;*/
  /*width: 100%;*/
  /*overflow: hidden;*/
  /*white-space: nowrap;*/
  /*text-overflow: ellipsis;*/
  /*}*/
  .omit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
